<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>账单 - 记账应用</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body class="bg-gray-100">
    <!-- 引入状态栏组件 -->
    <div id="status-bar-container"></div>

    <!-- 主要内容区域 -->
    <div class="pb-24">
        <!-- 头部月份选择 -->
        <div class="bg-white p-4 sticky top-0 z-8">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <h1 class="text-xl font-bold">账单明细</h1>
                    <div class="ml-3 flex items-center bg-gray-100 px-3 py-1 rounded-full">
                        <span class="text-gray-800">2023年5月</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-1">
                            <polyline points="6 9 12 15 18 9"></polyline>
                        </svg>
                    </div>
                </div>
                <div class="flex items-center">
                    <button class="bg-gray-100 p-2 rounded-full">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="11" cy="11" r="8"></circle>
                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                        </svg>
                    </button>
                    <button class="bg-gray-100 p-2 rounded-full ml-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="4" y1="21" x2="4" y2="14"></line>
                            <line x1="4" y1="10" x2="4" y2="3"></line>
                            <line x1="12" y1="21" x2="12" y2="12"></line>
                            <line x1="12" y1="8" x2="12" y2="3"></line>
                            <line x1="20" y1="21" x2="20" y2="16"></line>
                            <line x1="20" y1="12" x2="20" y2="3"></line>
                            <line x1="1" y1="14" x2="7" y2="14"></line>
                            <line x1="9" y1="8" x2="15" y2="8"></line>
                            <line x1="17" y1="16" x2="23" y2="16"></line>
                        </svg>
                    </button>
                </div>
            </div>

            <!-- 月度汇总信息 -->
            <div class="flex justify-between mt-4 text-center">
                <div class="flex-1">
                    <div class="text-gray-500 text-sm">收入</div>
                    <div class="text-green-500 font-medium">¥20,860.50</div>
                </div>
                <div class="flex-1">
                    <div class="text-gray-500 text-sm">支出</div>
                    <div class="text-red-500 font-medium">¥8,320.50</div>
                </div>
                <div class="flex-1">
                    <div class="text-gray-500 text-sm">结余</div>
                    <div class="font-medium">¥12,540.00</div>
                </div>
            </div>
        </div>

        <!-- 日历视图切换 -->
        <div class="bg-white mt-2 p-4">
            <div class="flex justify-between items-center">
                <h2 class="font-medium">日历视图</h2>
                <div class="text-sm text-blue-500">切换视图</div>
            </div>
            
            <!-- 日历表头 -->
            <div class="flex justify-between mt-4">
                <div class="w-9 text-center text-xs text-gray-500">日</div>
                <div class="w-9 text-center text-xs text-gray-500">一</div>
                <div class="w-9 text-center text-xs text-gray-500">二</div>
                <div class="w-9 text-center text-xs text-gray-500">三</div>
                <div class="w-9 text-center text-xs text-gray-500">四</div>
                <div class="w-9 text-center text-xs text-gray-500">五</div>
                <div class="w-9 text-center text-xs text-gray-500">六</div>
            </div>
            
            <!-- 日历第一行 -->
            <div class="flex justify-between mt-2">
                <div class="w-9 h-9 text-center text-gray-300">30</div>
                <div class="w-9 h-9 flex flex-col items-center justify-center">
                    <div class="text-sm">1</div>
                    <div class="w-4 h-1 bg-red-500 rounded-full mt-1"></div>
                </div>
                <div class="w-9 h-9 flex flex-col items-center justify-center">
                    <div class="text-sm">2</div>
                    <div class="w-4 h-1 bg-red-500 rounded-full mt-1"></div>
                </div>
                <div class="w-9 h-9 flex flex-col items-center justify-center">
                    <div class="text-sm">3</div>
                </div>
                <div class="w-9 h-9 flex flex-col items-center justify-center">
                    <div class="text-sm">4</div>
                    <div class="w-4 h-1 bg-red-500 rounded-full mt-1"></div>
                </div>
                <div class="w-9 h-9 flex flex-col items-center justify-center">
                    <div class="text-sm">5</div>
                </div>
                <div class="w-9 h-9 flex flex-col items-center justify-center">
                    <div class="text-sm">6</div>
                    <div class="w-4 h-1 bg-green-500 rounded-full mt-1"></div>
                </div>
            </div>
            
            <!-- 日历第二行 -->
            <div class="flex justify-between mt-2">
                <div class="w-9 h-9 flex flex-col items-center justify-center">
                    <div class="text-sm">7</div>
                </div>
                <div class="w-9 h-9 flex flex-col items-center justify-center">
                    <div class="text-sm">8</div>
                    <div class="w-4 h-1 bg-red-500 rounded-full mt-1"></div>
                </div>
                <div class="w-9 h-9 flex flex-col items-center justify-center">
                    <div class="text-sm">9</div>
                </div>
                <div class="w-9 h-9 flex flex-col items-center justify-center">
                    <div class="text-sm">10</div>
                    <div class="w-4 h-1 bg-red-500 rounded-full mt-1"></div>
                </div>
                <div class="w-9 h-9 flex flex-col items-center justify-center">
                    <div class="text-sm">11</div>
                </div>
                <div class="w-9 h-9 flex flex-col items-center justify-center">
                    <div class="text-sm">12</div>
                    <div class="w-4 h-1 bg-red-500 rounded-full mt-1"></div>
                </div>
                <div class="w-9 h-9 flex flex-col items-center justify-center">
                    <div class="text-sm">13</div>
                </div>
            </div>
            
            <!-- 日历第三行 -->
            <div class="flex justify-between mt-2">
                <div class="w-9 h-9 flex flex-col items-center justify-center">
                    <div class="text-sm">14</div>
                </div>
                <div class="w-9 h-9 flex flex-col items-center justify-center bg-blue-50 rounded-full border-2 border-blue-500">
                    <div class="text-sm text-blue-500 font-medium">15</div>
                </div>
                <div class="w-9 h-9 flex flex-col items-center justify-center">
                    <div class="text-sm">16</div>
                    <div class="w-4 h-1 bg-red-500 rounded-full mt-1"></div>
                </div>
                <div class="w-9 h-9 flex flex-col items-center justify-center">
                    <div class="text-sm">17</div>
                </div>
                <div class="w-9 h-9 flex flex-col items-center justify-center">
                    <div class="text-sm">18</div>
                    <div class="w-4 h-1 bg-red-500 rounded-full mt-1"></div>
                </div>
                <div class="w-9 h-9 flex flex-col items-center justify-center">
                    <div class="text-sm">19</div>
                </div>
                <div class="w-9 h-9 flex flex-col items-center justify-center">
                    <div class="text-sm">20</div>
                    <div class="w-4 h-1 bg-red-500 rounded-full mt-1"></div>
                </div>
            </div>
            
            <!-- 更多日历行省略 -->
        </div>

        <!-- 账单列表 -->
        <div class="mt-6 px-4">
            <div class="flex justify-between items-center mb-4">
                <h2 class="font-bold text-lg">5月15日 星期一</h2>
                <div class="text-sm">
                    <span class="text-red-500">-¥312.50</span>
                    <span class="mx-2 text-gray-300">|</span>
                    <span class="text-green-500">+¥0.00</span>
                </div>
            </div>
            
            <!-- 当日账单列表 -->
            <div class="space-y-2">
                <div class="bill-item flex rounded-lg">
                    <div class="bill-icon bg-red-100">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M3 3h18v18H3zM12 8v8m-4-4h8" />
                        </svg>
                    </div>
                    <div class="bill-content">
                        <div class="bill-title">超市购物</div>
                        <div class="bill-detail">10:30 · 日常开销</div>
                    </div>
                    <div class="bill-amount expense">-¥128.50</div>
                </div>
                
                <div class="bill-item flex rounded-lg">
                    <div class="bill-icon bg-red-100">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M17 11V3h-2v2H9V3H7v8h2V9h6v2h2zm-6 2v2h2v-2h-2z" />
                            <rect x="4" y="19" width="16" height="2" rx="1" />
                        </svg>
                    </div>
                    <div class="bill-content">
                        <div class="bill-title">午餐</div>
                        <div class="bill-detail">12:30 · 餐饮</div>
                    </div>
                    <div class="bill-amount expense">-¥35.00</div>
                </div>
                
                <div class="bill-item flex rounded-lg">
                    <div class="bill-icon bg-red-100">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10" />
                            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                            <line x1="12" y1="17" x2="12.01" y2="17" />
                        </svg>
                    </div>
                    <div class="bill-content">
                        <div class="bill-title">打车</div>
                        <div class="bill-detail">18:45 · 交通</div>
                    </div>
                    <div class="bill-amount expense">-¥45.00</div>
                </div>
                
                <div class="bill-item flex rounded-lg">
                    <div class="bill-icon bg-red-100">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M17 11V3h-2v2H9V3H7v8h2V9h6v2h2zm-6 2v2h2v-2h-2z" />
                            <rect x="4" y="19" width="16" height="2" rx="1" />
                        </svg>
                    </div>
                    <div class="bill-content">
                        <div class="bill-title">晚餐</div>
                        <div class="bill-detail">19:30 · 餐饮</div>
                    </div>
                    <div class="bill-amount expense">-¥104.00</div>
                </div>
            </div>
            
            <!-- 前一天 -->
            <div class="mt-8">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="font-bold text-lg">5月14日 星期日</h2>
                    <div class="text-sm">
                        <span class="text-red-500">-¥85.00</span>
                        <span class="mx-2 text-gray-300">|</span>
                        <span class="text-green-500">+¥12,000.00</span>
                    </div>
                </div>
                
                <!-- 当日账单列表 -->
                <div class="space-y-2">
                    <div class="bill-item flex rounded-lg">
                        <div class="bill-icon bg-green-100">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 7c-1.67 0-3-1.33-3-3s1.33-3 3-3 3 1.33 3 3-1.33 3-3 3z" />
                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
                            </svg>
                        </div>
                        <div class="bill-content">
                            <div class="bill-title">工资收入</div>
                            <div class="bill-detail">09:00 · 工资</div>
                        </div>
                        <div class="bill-amount income">+¥12,000.00</div>
                    </div>
                    
                    <div class="bill-item flex rounded-lg">
                        <div class="bill-icon bg-red-100">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M17 11V3h-2v2H9V3H7v8h2V9h6v2h2zm-6 2v2h2v-2h-2z" />
                                <rect x="4" y="19" width="16" height="2" rx="1" />
                            </svg>
                        </div>
                        <div class="bill-content">
                            <div class="bill-title">餐饮消费</div>
                            <div class="bill-detail">19:30 · 餐饮</div>
                        </div>
                        <div class="bill-amount expense">-¥85.00</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="bottom-nav">
      <a href="home.html" class="nav-item" id="nav-home">
          <div class="nav-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                  <polyline points="9 22 9 12 15 12 15 22"></polyline>
              </svg>
          </div>
          <div>首页</div>
      </a>
      <a href="bills.html" class="nav-item" id="nav-bills">
          <div class="nav-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                  <line x1="16" y1="2" x2="16" y2="6"></line>
                  <line x1="8" y1="2" x2="8" y2="6"></line>
                  <line x1="3" y1="10" x2="21" y2="10"></line>
              </svg>
          </div>
          <div>账单</div>
      </a>
  
      <a href="quick-entry.html" class="nav-item" id="nav-quick-entry">
          <div class="nav-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="12" y1="8" x2="12" y2="16"></line>
                  <line x1="8" y1="12" x2="16" y2="12"></line>
              </svg>
          </div>
          <div>记账</div>
      </a>
      <a href="statistics.html" class="nav-item" id="nav-statistics">
        <div class="nav-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="18" y1="20" x2="18" y2="10"></line>
                <line x1="12" y1="20" x2="12" y2="4"></line>
                <line x1="6" y1="20" x2="6" y2="14"></line>
            </svg>
        </div>
        <div>统计</div>
    </a>
      <a href="settings.html" class="nav-item" id="nav-settings">
          <div class="nav-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="3"></circle>
                  <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
              </svg>
          </div>
          <div>设置</div>
      </a>
  </div>

    <script>
        // 加载状态栏和底部导航组件
        fetch('../components/statusbar.html')
            .then(response => response.text())
            .then(html => {
                document.getElementById('status-bar-container').innerHTML = html;
            });
            
        fetch('../components/tabbar.html')
            .then(response => response.text())
            .then(html => {
                document.getElementById('tab-bar-container').innerHTML = html;
            });
    </script>
</body>
</html> 
